<template>
  <div class="attend_link">
    <vxe-table
      class="mytable-scrollbar"
      border
      stripe
      min-height="100%"
      row-id="bulletionId"
      size="medium"
      resizable
      :loading="loading2"
      :scroll-y="{ enabled: false }"
      :data="tableData"
      :header-cell-class-name="headerStyle"
      :row-class-name="rowClass"
      :checkbox-config="{ highlight: true, range: false }"
      highlight-hover-row
      @radio-change="radioChangeEvent">
      <vxe-column type="radio" width="40"></vxe-column>
      <vxe-column type="seq" title="序号" width="50" align="center"></vxe-column>
      <vxe-column field="title" title="标题" min-width="310" align="center"></vxe-column>
      <vxe-column field="leaveName" title="请假类型" width="100" align="center"></vxe-column>
      <vxe-column field="creator" title="请假时间" width="265" align="center"></vxe-column>
      <vxe-column field="createTime" title="申请时间" width="140" align="center"></vxe-column>
    </vxe-table>
    <el-pagination
      :loading="loading2"
      background
      :current-page="tablePage.pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="tablePage.pageSize"
      :total="tablePage.totalSize"
      @current-change="onPageChange"
      hide-on-single-page
      layout="pager,total"></el-pagination>
    <div class="btn_save">
      <el-button @click="cancelLink" size="small">取 消</el-button>
      <el-button size="small" type="primary" @click="linkSuccess">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { listRelatedLeave } from '@apis/api-attendance.js'
export default {
  components: {},
  data() {
    return {
      loading2: false,
      tableData: [],
      tablePage: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0,
      },
      selectRow: {},
    }
  },
  created() {
    this.getPage()
  },
  mounted() {},
  methods: {
    getPage() {
      listRelatedLeave({
        currentPage: this.tablePage.pageNum,
        pageSize: this.tablePage.pageSize,
        param: {},
      }).then(res => {
        this.tableData = res.data.content || []
        this.tableData.forEach(element => {
          element.creator = element.startTime + '至' + element.endTime
        })
        this.tablePage.totalSize = res.data.totalSize
      })
    },
    /* 分页切换 */
    onPageChange(e) {
      this.tablePage.pageNum = e.currentPage
      this.tablePage.pageSize = e.pageSize
      this.getPage()
    },
    /* 状态筛选 */
    onStatusChange(e) {
      this.selectParams.status = e
      this.getPage()
    },
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    /* 监听CheckBox变化 */
    radioChangeEvent({ row }) {
      this.selectRow = row
    },
    cancelLink() {
      this.$emit('cancelLink', true)
    },
    linkSuccess() {
      if (Object.keys(this.selectRow).length === 0) {
        this.$message.error('请选择关联的数据')
        return
      }
      this.$emit('linkSuccess', this.selectRow)
    },
  },
}
</script>

<style lang="scss" scoped>
.attend_link {
  .btn_save {
    text-align: right;
  }
}
</style>
